<template>
  <div>   
    <setForm id="0" >       
       <template slot="boxTop">{{$t('message.medias.multicast')}}</template>
          <template slot="boxMain">                
            <el-row>
            <el-col :span="4" class="col4">  
              <div class="txtLabel">            
                <label>{{$t('message.medias.enable')}}</label>   
              </div>
              <div class="txtLabel">            
                <label>{{$t('message.medias.multiIpaddr')}}</label>   
              </div>
              <div class="txtLabel">            
                <label></label>   
              </div>
              <div class="txtLabel" >                 
                <label >{{$t('message.medias.portStart')}}</label>  
              </div>
              <div class="txtLabel" >                                    
                <label >{{$t('message.medias.portEnd')}}</label> 
              </div>                             
            </el-col>
            <el-col :span="20" class="col20">
              <div class="txtInput">
                <el-checkbox v-model="media.multicase.enable" >{{$t('message.medias.enable')}}</el-checkbox>
              </div>
              <div class="txtInput">
                <el-radio-group v-model="userDef" @change="onUserDefChange">
                  <el-radio :label="false">{{$t('message.medias.sysDefault')}}</el-radio>
                  <el-radio :label="true">{{$t('message.medias.userDef')}}</el-radio>
                </el-radio-group>
              </div>
              <div class="txtInput">
                <span>
                  <el-input v-show="userDef" v-model="media.multicase.multiIpaddr" :disabled="!userDef"  class="span17_elinput"  v-validate="'ipFormat'"  type="text" :name="$t('message.medias.multiIpaddr')"></el-input>             
                  <el-button v-show="userDef" @click="onRandGen">{{$t('message.medias.Random')}}</el-button>  
                  <span v-show="this.errors.has($t('message.medias.multiIpaddr'))" class="text-style" > {{ errors.first($t('message.medias.multiIpaddr')) }} </span>
                </span>
              </div>
              <div class="txtInput">
                <el-input v-model.number="media.multicase.portStart" v-validate="'valiPort'"  type="number" class="span17_elinput" :name="$t('message.medias.portStart')" ></el-input>               
                <span v-show="this.errors.has($t('message.medias.portStart'))" class="text-style" > {{ errors.first($t('message.medias.portStart')) }} </span>  
              </div>
              <div class="txtInput" >
                <el-input v-model.number="media.multicase.portEnd" v-validate="'valiPort'"  type="number" class="span17_elinput" :name="$t('message.medias.portEnd')" ></el-input>               
                <span v-show="this.errors.has($t('message.medias.portEnd'))" class="text-style" > {{ errors.first($t('message.medias.portEnd')) }} </span>  
              </div>
            </el-col>
          </el-row>
           <el-button  class="btnsave" @click="onSaveMulticast">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import ebus from "../../../../libs/ebus";
import { mapState, mapActions } from "vuex";
export default {
  created(){
    ebus.emit('getMulticaseInfo', this)
  },
  computed:{    
    ...mapState(["media"]),
  },
  watch: {
    'media.multicase' (newVal, oldVal){  
      if(newVal.multiIpaddr == '0.0.0.0'){
        this.userDef = false;
      } else {
        this.userDef = true;
      }
    }
  },
  data() {
    return {
      userDef: false,
      enable: true,
      multiIpaddr: "0.0.0.0",
      portStart: 1,
      portEnd: 1
    };
  },
  components: {
    setForm
  },
  methods: {
    onSaveMulticast() {         
      if (
        this.errors.has(this.$t('message.medias.multiIpaddr')) ||
        this.errors.has(this.$t("message.medias.portStart")) ||
        this.errors.has(this.$t("message.medias.portEnd")) 
      ) {
        return;
      }
      if(!this.userDef){
        this.media.multicase.multiIpaddr = '0.0.0.0';
      }
      var option = {
        enable: this.media.multicase.enable,
        multiIpaddr: this.media.multicase.multiIpaddr,
        portStart: parseInt(this.media.multicase.portStart),
        portEnd: parseInt(this.media.multicase.portEnd)
      };
      api.onRequest(
        "$method.$set.stream.transfer.multicast", JSON.stringify(option), null, null, function(msg, reqReply) {
          var res = JSON.parse(msg);
          if (res.code == 0) {
            ebus.emit('getMulticaseInfo', this)
            this.notification("Success", "");
          } else {
            this.notification("error", res.msg);
          }
        }.bind(this)
      );
    },    
    onUserDefChange() {
      if(!this.userDef){
        // this.media.multicase.multiIpaddr = '0.0.0.0';
      }
    },
    onRandGen(e) {      
      e && e.preventDefault();
      var p1 = 225 + Math.floor(Math.random()*13 + 1);
      var p2 = Math.floor(Math.random()*255 + 1);
      var p3 = Math.floor(Math.random()*255 + 1);
      var p4 = Math.floor(Math.random()*255 + 1);
      this.media.multicase.multiIpaddr = p1 + '.' + p2 + '.' + p3 + '.' + p4;
    },
  }
};
</script>

<style scoped>
.col4 .txtLabel{
  height: 60px;
}
.col20 .txtInput{
  height: 60px;
  /* margin-top: -4px; */
}
.col20 .txtInput .el-input{
  margin-top: -25px
}
</style>

